<template>
    <div class="slotLick">
        <ul class="title">
            <li class="songlist__header_cz">操作</li>
            <li class="songlist__header_title">标题</li>
            <li class="songlist__header_singer">歌手</li>
            <li class="songlist__header_zj">专辑</li>
            <li class="songlist__header_time">时间</li>
        </ul>
        <ul class="song">
                 <li v-for="(items,index) in data" :key="index"
                 @click="paly(items)"
                 >
                <div class="songlist__header_cz">
                <span>{{index+1}}</span>
                <span class="iconfont sc" v-if="isSc">&#xeca1;</span>
                 <span class="iconfont sc2" v-if="!isSc">&#xe86f;</span>
                <span class="iconfont down">&#xe855;</span>
            </div>
            <div class="songlist__header_title">
                <span class="songName"> {{items.name}}</span>
                <span class="name-title">{{items.alia[0]}}</span>
                <span class="hot2" v-if="items.mv">MV</span>
                <span class="hot2" v-if="items.sq">SQ</span>
                <span class="hot2" v-if="items.h">Hi-Res</span>
            </div>
            <div class="songlist__header_singer">
                <span>{{items.singer}}</span>
            </div>
            <div class="songlist__header_zj">
                <span>{{items.al.name}}</span>
            </div>
            <div class="songlist__header_time">
                <span>
                    {{items.dt}}
                </span>
            </div>
            </li>
            <!-- <li>
                <div class="songlist__header_cz">
                <span>01</span>
                <span class="iconfont sc" v-if="isSc">&#xeca1;</span>
                 <span class="iconfont sc2" v-if="!isSc">&#xe86f;</span>
                <span class="iconfont down">&#xe855;</span>
            </div>
            <div class="songlist__header_title">
                <span class="songName">打上花火</span>
                <span class="name-title">（动画电影《升空的焰火，从下面看还是从侧面看》主题曲）</span>
                <span class="hot2">MV</span>
                <span class="hot2">SQ</span>
                <span class="hot2">Hi-Res</span>
            </div>
            <div class="songlist__header_singer">
                <span>升空的焰火，从下面看还是从侧面看</span>
            </div>
            <div class="songlist__header_zj">
                <span>专辑</span>
            </div>
            <div class="songlist__header_time">
                <span>
                    0:3:45
                </span>
            </div>
            </li> -->
        </ul>
        
    </div>
</template>
<script>
import slotList from './slotList.vue'
import { mapState, mapGetters } from "vuex"; //导入vuex的辅助函数
import { mapMutations, mapActions } from "vuex"; //导入vuex的辅助函数
/*
    
点击一首歌曲：会在vuex currentPlaylist:[]尾部添加一条歌曲，
并播放当前歌曲，播放完当前歌曲播放下一首（获取当前音乐id和数组下标比对）

播放全部：会直接替换当前currentPlaylist内容，并播放第一首
*/

export default {
    name:'slotLick',
  
    data() {
        return {
            isSc:true,
            songList:[],
            bgmSrc:''
        }
    },
    props:{
        data:{
            typeof:Object || Array,
            default:_=>{
                return{}
            }
        }
    },
    components:{
        slotList
    },
    //activityId是父组件传过来的值，childActiveId为子组件中新定义的变量
 watch:{
        data:{
            handler(newVal,oldVal){ 
                this.songList = [...newVal]
                // console.log(newVal)
            },
            deep:true,
            immediate:true,
        }
    },
    mounted(){
    },
    created() {
    },
    methods: {
 
        paly(song){
            // console.log([...this.$store.getters.updataCurrentPlaylist])
            // let item = [...this.$store.getters.updataCurrentPlaylist].find(item => {
            //     return item.id == song.id;
            // });
            // // 当前播放列表是否存在
            // if (!item) {
            //     this.$store.dispatch('setCurrentPlaylist',song)
            // } else {
            //     return
            // }
             this.$store.dispatch('setCurrentPlaylist',song)
        }
    },


}
</script>
<style lang="less" scoped>
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon2/iconfont.ttf?t=1658068442606') format('truetype');
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/iconfont.ttf?t=1658501073558') format('truetype');
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon4/iconfont.ttf?t=1659187482449') format('truetype');
}

    div,span,ul,li,img{
    font-size: 0;
}
.slotLick{
    .hot2{
         margin-left: 4px;
          display: inline-block;
        //   border: solid 1px #EC4141;
          padding: 0 -1px;
          color: #EC4141 !important;
        //   line-height: 14px;
          font-weight: 400;
          border-radius: 3px;
          font-size: 12px !important;
          cursor: pointer;
          font-style: italic;
          font-weight: 800;
    }
    ul::after{
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;

    }
    .title{
        height: 50px;
        line-height: 50px;
        background-color: rgba(0,0,0,.01);
        color: #999;
        box-sizing: border-box;
        width: 100%;
        overflow: hidden;
        li{
            font-size: 16px;
            float: left;
            line-height: 50px;
            height: 50px;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-left: 15px;
            box-sizing: border-box;
        }
        .songlist__header_cz{
            width: 10%;
        }
        .songlist__header_title{
            width: 36%;
        }
        .songlist__header_singer{
            width: 17%;
        }
        .songlist__header_zj{
             width: 23%;
        }
        .songlist__header_time{
            width: 14%;
        }
    }
    .song{
        li{
            display: flex;
            
        }
         li:after{
        content:'';
        display:block;
        clear:both;
        }

         div{
            font-size: 17px;
            float: left;
            position: relative;
            line-height: 50px;
            height: 50px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-left: 15px;
            box-sizing: border-box;
            span{
                color: #656565;
            }
        }
        li:nth-child(2n){
            background-color: #FAFAFA;
        }
        li:hover{
            background: #F1F2F3;
        }
         .songlist__header_cz{
            width: 10%;
            padding-left: 0px !important;
            
            .sc{
                font-size: 18px;
                margin: 0  10px;
                color: #EC4141;
            }
            .sc2{
                font-size: 18px;
                margin: 0  10px;
                color: #656565;
            }
            .down{
                font-size: 18px;
            }
        }
        .songlist__header_title{
            width: 36%;
            display: flex;
            .songName{
                color: #343435 !important;
            }
            .name-title{
                max-width: 72%;
                box-sizing: border-box;
                overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            // padding-left: 15px;
            box-sizing: border-box;
            }
        }
        .songlist__header_singer{
            width: 17%;
        }
        .songlist__header_zj{
             width: 23%;
        }
        .songlist__header_time{
            width: 14%;
        }
        span{
             font-size: 15px;
        }
    }
}
    
 
</style>